<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" size="mini" @click="delAll"
          >批量删除</el-button
        >
        <el-input
          v-model="select_word"
          size="mini"
          placeholder="请输入姓名"
          class="handle-input"
        ></el-input>
        <el-button
          type="primary"
          size="mini"
          @click="centerDialogVisible = true"
          >添加人口流动信息</el-button
        >
      </div>
    </div>
    <!-- 查询 -->
    <el-table
      size="mini"
      ref="multipleTable"
      border
      style="width: 100%"
      height="570px"
      :data="data"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="90"
        align="center"
      ></el-table-column>
      <el-table-column label="性别" width="50" align="center">
        <template slot-scope="scope">
          {{ changeSex(scope.row.sex) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="nationality"
        label="民族"
        width="90"
        align="center"
      ></el-table-column>
      <el-table-column label="文化程度" width="90" align="center">
        <template slot-scope="scope">
          {{ changeEducation(scope.row.education) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="identificationNumber"
        label="身份证号码"
        width="145"
        align="center"
      ></el-table-column>
      <el-table-column label="户口类型" width="100" align="center">
        <template slot-scope="scope">
          {{ changeAccountTypes(scope.row.accountTypes) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="localPoliceStation"
        label="户口所在地派出所"
        width="140"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="affiliatedVillage"
        label="所属村镇"
        width="80"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="residency"
        label="居住事由"
        width="140"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="residentialAddress"
        label="居住地址"
        width="160"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="currentlyEngagedOccupation"
        label="现从事职业"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="unitAddress"
        label="单位地址"
        width="160"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 翻页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="total,prev,pager,next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>

    <!-- 添加 -->
    <el-dialog
      title="添加人口流动信息"
      :visible.sync="centerDialogVisible"
      width="450px"
      center
    >
      <el-form :model="registerForm" ref="registerForm" label-width="80px">
        <el-form-item prop="name" label="姓名" size="mini">
          <el-input v-model="registerForm.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别" size="mini">
          <el-radio-group v-model="registerForm.sex">
            <el-radio :label="0">女</el-radio>
            <el-radio :label="1">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="nationality" label="民族" size="mini">
          <el-input
            v-model="registerForm.nationality"
            placeholder="民族"
          ></el-input>
        </el-form-item>
        <el-form-item label="文化程度" size="mini">
          <el-radio-group v-model="registerForm.education">
            <el-radio :label="0">初等教育</el-radio>
            <el-radio :label="1">中等教育</el-radio>
            <el-radio :label="2">高等教育</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          prop="identificationNumber"
          label="身份证号码"
          size="mini"
        >
          <el-input
            v-model="registerForm.identificationNumber"
            placeholder="身份证号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="户口类型" size="mini">
          <el-radio-group v-model="registerForm.accountTypes">
            <el-radio :label="0">农业户口</el-radio>
            <el-radio :label="1">城镇户口</el-radio>
            <el-radio :label="2">城市户口</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          prop="localPoliceStation"
          label="户口所在地派出所"
          size="mini"
        >
          <el-input
            v-model="registerForm.localPoliceStation"
            placeholder="户口所在地派出所"
          ></el-input>
        </el-form-item>

        <el-form-item prop="affiliatedVillage" label="所属村镇" size="mini">
          <el-cascader
            :options="options"
            v-model="registerForm.affiliatedVillage"
            placeholder="所属村镇"
          ></el-cascader>
        </el-form-item>

        <el-form-item prop="residency" label="居住事由" size="mini">
          <el-input
            v-model="registerForm.residency"
            placeholder="居住事由"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item prop="residentialAddress" label="居住地址" size="mini">
          <el-input
            v-model="registerForm.residentialAddress"
            placeholder="居住地址"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="currentlyEngagedOccupation"
          label="现从事职业"
          size="mini"
        >
          <el-input
            v-model="registerForm.currentlyEngagedOccupation"
            placeholder="现从事职业"
          ></el-input>
        </el-form-item>
        <el-form-item prop="unitAddress" label="单位地址" size="mini">
          <el-input
            v-model="registerForm.unitAddress"
            placeholder="单位地址"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="centerDialogVisible = false"
          >取消</el-button
        >
        <el-button size="mini" @click="addPopulationFlow">确定</el-button>
      </span>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog
      title="修改人口流动信息"
      :visible.sync="editVisible"
      width="450px"
      center
    >
      <el-form :model="form" ref="form" label-width="80px">
        <el-form-item prop="name" label="姓名" size="mini">
          <el-input v-model="form.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别" size="mini">
          <el-radio-group v-model="form.sex">
            <el-radio :label="0">女</el-radio>
            <el-radio :label="1">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="nationality" label="民族" size="mini">
          <el-input v-model="form.nationality" placeholder="民族"></el-input>
        </el-form-item>
        <el-form-item label="文化程度" size="mini">
          <el-radio-group v-model="form.education">
            <el-radio :label="0">初等教育</el-radio>
            <el-radio :label="1">中等教育</el-radio>
            <el-radio :label="2">高等教育</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          prop="identificationNumber"
          label="身份证号码"
          size="mini"
        >
          <el-input
            v-model="form.identificationNumber"
            placeholder="身份证号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="户口类型" size="mini">
          <el-radio-group v-model="form.accountTypes">
            <el-radio :label="0">农业户口</el-radio>
            <el-radio :label="1">城镇户口</el-radio>
            <el-radio :label="2">城市户口</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          prop="localPoliceStation"
          label="户口所在地派出所"
          size="mini"
        >
          <el-input
            v-model="form.localPoliceStation"
            placeholder="户口所在地派出所"
          ></el-input>
        </el-form-item>

        <el-form-item prop="affiliatedVillage" label="所属村镇" size="mini">
          <el-cascader
            :options="options"
            v-model="form.affiliatedVillage"
            placeholder="所属村镇"
          ></el-cascader>
        </el-form-item>

        <el-form-item prop="residency" label="居住事由" size="mini">
          <el-input
            v-model="form.residency"
            placeholder="居住事由"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item prop="residentialAddress" label="居住地址" size="mini">
          <el-input
            v-model="form.residentialAddress"
            placeholder="居住地址"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="currentlyEngagedOccupation"
          label="现从事职业"
          size="mini"
        >
          <el-input
            v-model="form.currentlyEngagedOccupation"
            placeholder="现从事职业"
          ></el-input>
        </el-form-item>
        <el-form-item prop="unitAddress" label="单位地址" size="mini">
          <el-input
            v-model="form.unitAddress"
            placeholder="单位地址"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="delVisible = false">取消</el-button>
        <el-button size="mini" @click="editPopulationFlow">确定</el-button>
      </span>
    </el-dialog>

    <!-- 删除 -->
    <el-dialog
      title="删除人口流动信息"
      :visible.sync="delVisible"
      width="300px"
      center
    >
      <div align="center">删除不可恢复，是否确定删除？</div>
      <span slot="footer">
        <el-button size="mini" @click="delVisible = false">取消</el-button>
        <el-button size="mini" @click="deleteRow">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  setPopulationFlow,
  getAllPopulationFlow,
  updatePopulationFlow,
  deletePopulationFlow,
} from "../api/index";
import { mixin } from "../mixins/index";
export default {
  mixins: [mixin],
  data() {
    return {
      options: [
        {
          value: "南皮镇",
          label: "南皮镇",
        },
        {
          value: "冯家口镇",
          label: "冯家口镇",
        },
        {
          value: "寨子镇",
          label: "寨子镇",
        },
        {
          value: "鲍官屯镇",
          label: "鲍官屯镇",
        },
        {
          value: "王寺镇",
          label: "王寺镇",
        },
        {
          value: "乌马营镇",
          label: "乌马营镇",
        },
        {
          value: "潞灌镇",
          label: "潞灌镇",
        },
        {
          value: "大浪淀乡",
          label: "大浪淀乡",
        },
        {
          value: "刘八里乡",
          label: "刘八里乡",
        },
      ],

      centerDialogVisible: false, //添加弹窗是否显示
      editVisible: false, //编辑弹窗是否显示
      delVisible: false, //删除弹窗是否显示
      tableData: [],
      tempData: [],
      select_word: "",
      pageSize: 13, //分页每页大小
      currentPage: 1, //当前页
      idx: -1, //当前选择项
      multipleSelection: [], //哪些项已经打勾
      // 添加框
      registerForm: {
        name: "",
        sex: "",
        nationality: "",
        education: "",
        identificationNumber: "",
        accountTypes: "",
        localPoliceStation: "",
        affiliatedVillage: "",
        residency: "",
        residentialAddress: "",
        currentlyEngagedOccupation: "",
        unitAddress: "",
      },
      // 编辑框
      form: {
        id: "",
        name: "",
        sex: "",
        nationality: "",
        education: "",
        identificationNumber: "",
        accountTypes: "",
        localPoliceStation: "",
        affiliatedVillage: "",
        residency: "",
        residentialAddress: "",
        currentlyEngagedOccupation: "",
        unitAddress: "",
      },
    };
  },
  computed: {
    //计算当前搜索结果表里的数据
    data() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  watch: {
    //搜索框里面的内容发生变化的时候，搜索结果table列表的内容跟着它的内容发生变化
    select_word: function () {
      if (this.select_word === "") {
        this.tableData = this.tempData;
      } else {
        this.tableData = [];
        for (let item of this.tempData) {
          if (item.name.includes(this.select_word)) {
            this.tableData.push(item);
          }
        }
      }
    },
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 查询所有人口流动信息
    getData() {
      this.tempData = [];
      this.tableData = [];
      getAllPopulationFlow().then((res) => {
        this.tempData = res;
        this.tableData = res;
        this.currentPage = 1;
      });
    },
    // 添加人口流动信息
    addPopulationFlow() {
      let params = new URLSearchParams();
      params.append("name", this.registerForm.name);
      params.append("sex", this.registerForm.sex);
      params.append("nationality", this.registerForm.nationality);
      params.append("education", this.registerForm.education);
      params.append(
        "identificationNumber",
        this.registerForm.identificationNumber
      );
      params.append("accountTypes", this.registerForm.accountTypes);
      params.append("localPoliceStation", this.registerForm.localPoliceStation);
      params.append("affiliatedVillage", this.registerForm.affiliatedVillage);
      params.append("residency", this.registerForm.residency);
      params.append("residentialAddress", this.registerForm.residentialAddress);
      params.append(
        "currentlyEngagedOccupation",
        this.registerForm.currentlyEngagedOccupation
      );
      params.append("unitAddress", this.registerForm.unitAddress);

      setPopulationFlow(params)
        .then((res) => {
          if (res.code === 1) {
            this.getData();
            this.notify("添加成功", "success");
          } else {
            this.notify("添加失败", "error");
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.centerDialogVisible = false;
    },
    // 弹出编辑页面
    handleEdit(row) {
      this.editVisible = true;
      this.form = {
        id: row.id,
        name: row.name,
        sex: row.sex,
        nationality: row.nationality,
        education: row.education,
        identificationNumber: row.identificationNumber,
        accountTypes: row.accountTypes,
        localPoliceStation: row.localPoliceStation,
        affiliatedVillage: row.affiliatedVillage,
        residency: row.residency,
        residentialAddress: row.residentialAddress,
        currentlyEngagedOccupation: row.currentlyEngagedOccupation,
        unitAddress: row.unitAddress,
      };
    },
    // 保存编辑页面修改的数据
    editPopulationFlow() {
      let params = new URLSearchParams();
      params.append("id", this.form.id);
      params.append("name", this.form.name);
      params.append("sex", this.form.sex);
      params.append("nationality", this.form.nationality);
      params.append("education", this.form.education);
      params.append("identificationNumber", this.form.identificationNumber);
      params.append("accountTypes", this.form.accountTypes);
      params.append("localPoliceStation", this.form.localPoliceStation);
      params.append("affiliatedVillage", this.form.affiliatedVillage);
      params.append("residency", this.form.residency);
      params.append("residentialAddress", this.form.residentialAddress);
      params.append(
        "currentlyEngagedOccupation",
        this.form.currentlyEngagedOccupation
      );
      params.append("unitAddress", this.form.unitAddress);

      updatePopulationFlow(params)
        .then((res) => {
          if (res.code === 1) {
            this.getData();
            this.notify("修改成功", "success");
          } else {
            this.notify("修改失败", "error");
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.editVisible = false;
    },
    // 删除人口流动信息
    deleteRow() {
      deletePopulationFlow(this.idx)
        .then((res) => {
          if (res) {
            this.getData();
            this.notify("删除成功", "success");
          } else {
            this, notify("删除失败", "error");
          }
        })
        .catch((err) => {
          console.log(error);
        });
      this.delVisible = false;
    },
  },
};
</script>
<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
.pagination {
  display: flex;
  justify-content: center;
}
</style>
